<template>
    <div class="student-manager">
      <!-- 主页面内容 -->
      <div class="header">
        <a-input-search
          v-model:value="searchText"
          placeholder="输入姓名或学校搜索"
          style="width: 300px"
          @search="handleSearch"
        />
        <a-button type="primary" @click="showModal = true">
          <template #icon><plus-outlined /></template>
          新增学生
        </a-button>
      </div>
  
      <!-- 数据表格 -->
      <a-table
        :columns="columns"
        :data-source="filteredData"
        :pagination="pagination"
        row-key="id"
        bordered
      >
        <!-- 表格内容省略，与之前相同 -->
      </a-table>
  
      <!-- 自定义弹窗 -->
      <div v-if="showModal" class="custom-modal">
        <div class="modal-mask" @click="handleCancel"></div>
        <div class="modal-container">
          <div class="modal-header">
            <h3>{{ modalType === 'add' ? '新增学生' : '编辑学生信息' }}</h3>
            <close-outlined class="close-icon" @click="handleCancel" />
          </div>
          
          <div class="modal-body">
            <a-form
              ref="formRef"
              :model="formState"
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 18 }"
              :rules="rules"
            >
              <a-form-item label="姓名" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入学生姓名" />
              </a-form-item>
              
              <a-form-item label="性别" name="gender">
                <a-radio-group v-model:value="formState.gender">
                  <a-radio :value="1">男</a-radio>
                  <a-radio :value="2">女</a-radio>
                </a-radio-group>
              </a-form-item>
              
              <a-form-item label="年龄" name="age">
                <a-input-number 
                  v-model:value="formState.age" 
                  placeholder="请输入年龄"
                  :min="6"
                  :max="25"
                  style="width: 100%"
                />
              </a-form-item>
              
              <a-form-item label="出生日期" name="birthDate">
                <a-date-picker 
                  v-model:value="formState.birthDate" 
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                />
              </a-form-item>
              
              <a-form-item label="学校" name="school">
                <a-select
                  v-model:value="formState.school"
                  placeholder="请选择学校"
                  show-search
                  option-filter-prop="label"
                >
                  <a-select-option 
                    v-for="school in schoolOptions" 
                    :key="school.value"
                    :value="school.value"
                    :label="school.label"
                  >
                    {{ school.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              
              <a-form-item label="年级" name="grade">
                <a-select
                  v-model:value="formState.grade"
                  placeholder="请选择年级"
                >
                  <a-select-option 
                    v-for="grade in gradeOptions" 
                    :key="grade.value"
                    :value="grade.value"
                  >
                    {{ grade.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              
              <a-form-item label="班级" name="class">
                <a-input 
                  v-model:value="formState.class" 
                  placeholder="请输入班级，如：1班"
                />
              </a-form-item>
            </a-form>
          </div>
          
          <div class="modal-footer">
            <a-button @click="handleCancel">取消</a-button>
            <a-button type="primary" @click="handleOk" :loading="confirmLoading">确定</a-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed, onMounted } from 'vue';
  import { 
    PlusOutlined, 
    EditOutlined, 
    DeleteOutlined,
    CloseOutlined,
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import dayjs from 'dayjs';
  
  // 数据定义（与之前相同）
  const columns = [
    // 列定义省略，与之前相同
  ];
  
  const genderMap = { 1: '男', 2: '女' };
  
  const schoolOptions = [
    { value: 'school1', label: '第一实验小学' },
    // 其他学校选项省略
  ];
  
  const gradeOptions = [
    { value: 'grade1', label: '一年级' },
    // 其他年级选项省略
  ];
  
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '50'],
    showTotal: total => `共 ${total} 条数据`,
  });
  
  const formState = reactive({
    id: null,
    name: '',
    gender: 1,
    age: null,
    birthDate: null,
    school: null,
    grade: null,
    class: ''
  });
  
  const rules = {
    // 验证规则省略，与之前相同
  };
  
  // 响应式数据
  const dataSource = ref([]);
  const searchText = ref('');
  const showModal = ref(false);
  const modalType = ref('add');
  const confirmLoading = ref(false);
  const formRef = ref();
  
  // 计算属性
  const filteredData = computed(() => {
    // 过滤逻辑省略，与之前相同
  });
  
  // 方法
  const formatDate = (date) => {
    return dayjs(date).format('YYYY-MM-DD');
  };
  
  const calculateAge = (birthDate) => {
    if (!birthDate) return null;
    return dayjs().diff(dayjs(birthDate), 'year');
  };
  
  const initData = () => {
    // 初始化数据逻辑省略，与之前相同
  };
  
  const handleSearch = () => {
    pagination.current = 1;
  };
  
  const handleOk = async () => {
    try {
      await formRef.value.validate();
      confirmLoading.value = true;
      
      // 计算年龄
      if (formState.birthDate && !formState.age) {
        formState.age = calculateAge(formState.birthDate);
      }
      
      // 模拟异步操作
      setTimeout(() => {
        if (modalType.value === 'add') {
          // 新增逻辑
          const newId = dataSource.value.length > 0 
            ? Math.max(...dataSource.value.map(item => item.id)) + 1 
            : 1;
          dataSource.value.unshift({
            ...formState,
            id: newId
          });
          message.success('新增学生成功');
        } else {
          // 编辑逻辑
          const index = dataSource.value.findIndex(item => item.id === formState.id);
          if (index !== -1) {
            dataSource.value[index] = { ...formState };
            message.success('更新学生信息成功');
          }
        }
        
        confirmLoading.value = false;
        showModal.value = false;
        formRef.value.resetFields();
      }, 800);
    } catch (error) {
      console.log('验证失败:', error);
    }
  };
  
  const handleCancel = () => {
    formRef.value.resetFields();
    showModal.value = false;
  };
  
  const handleDelete = (id) => {
    // 删除逻辑省略，与之前相同
  };
  
  onMounted(() => {
    initData();
  });
  </script>
  
  <style scoped>
  .student-manager {
    padding: 20px;
    position: relative;
  }
  
  .header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 自定义弹窗样式 */
  .custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
  }
  
  .modal-container {
    position: relative;
    width: 700px;
    max-height: 80vh;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 
                0 6px 16px 0 rgba(0, 0, 0, 0.08),
                0 9px 28px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
  }
  
  .modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
  }
  
  .close-icon {
    font-size: 16px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.45);
  }
  
  .close-icon:hover {
    color: rgba(0, 0, 0, 0.75);
  }
  
  .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
  }
  
  .modal-footer {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
  }
  
  .modal-footer button {
    margin-left: 8px;
  }
  </style>